<template>
  <div class="category-nav">
    <div class="category-content">
      <a-tag 
        :class="{ active: selectedKeys.includes('0') }"
        @click="handleCategorySelect({ id: '0', categoryName: '全部' })"
      >
        全部
      </a-tag>

      <template v-for="category in flatCategories">
        <a-tag 
          :key="category.id"
          :class="{ active: selectedKeys.includes(category.id) }"
          @click="handleCategorySelect(category)"
        >
          {{ category.categoryName }}
        </a-tag>
      </template>
    </div>
  </div>
</template>

<script>
import { category } from '@/api/category'

export default {
  name: 'CategoryNav',
  data() {
    return {
      categories: [],
      selectedKeys: ['0'],
      flatCategories: []
    }
  },
  created() {
    this.fetchAllCategories()
  },
  methods: {
    async fetchAllCategories() {
      try {
        const res = await category.getList()
        if (res.code === 200) {
          this.categories = res.content || []
          this.flatCategories = this.flattenCategories(this.categories)
        }
      } catch (error) {
        console.error('获取分类失败:', error)
        this.$message.error('获取分类失败')
      }
    },
    
    flattenCategories(categories) {
      let result = []
      categories.forEach(category => {
        result.push({
          id: category.id,
          categoryName: category.categoryName
        })
        if (category.children?.length) {
          result = result.concat(this.flattenCategories(category.children))
        }
      })
      return result
    },

    handleCategorySelect(category) {
      this.selectedKeys = [category.id.toString()]
      this.$emit('category-selected', category)
    }
  }
}
</script>

<style scoped>
.category-nav {
  width: 100%;
  background: #fff;
}

.category-content {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.ant-tag {
  cursor: pointer;
  margin: 0;
  padding: 6px 16px;
  font-size: 14px;
  line-height: 20px;
  border-radius: 4px;
  transition: all 0.2s;
  border: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  font-weight: 500;
}

.ant-tag:hover {
  opacity: 0.85;
}

/* 全部 */
.ant-tag:first-child {
  color: #52c41a;
  background: #f6ffed;
}
.ant-tag:first-child:hover, .ant-tag:first-child.active {
  color: #fff;
  background: #52c41a;
}

/* 其他标签颜色 */
.ant-tag:nth-child(8n+2) {
  color: #1890ff;
  background: #e6f7ff;
}
.ant-tag:nth-child(8n+2):hover, .ant-tag:nth-child(8n+2).active {
  color: #fff;
  background: #1890ff;
}

.ant-tag:nth-child(8n+3) {
  color: #faad14;
  background: #fffbe6;
}
.ant-tag:nth-child(8n+3):hover, .ant-tag:nth-child(8n+3).active {
  color: #fff;
  background: #faad14;
}

.ant-tag:nth-child(8n+4) {
  color: #f5222d;
  background: #fff1f0;
}
.ant-tag:nth-child(8n+4):hover, .ant-tag:nth-child(8n+4).active {
  color: #fff;
  background: #f5222d;
}

.ant-tag:nth-child(8n+5) {
  color: #722ed1;
  background: #f9f0ff;
}
.ant-tag:nth-child(8n+5):hover, .ant-tag:nth-child(8n+5).active {
  color: #fff;
  background: #722ed1;
}

.ant-tag:nth-child(8n+6) {
  color: #13c2c2;
  background: #e6fffb;
}
.ant-tag:nth-child(8n+6):hover, .ant-tag:nth-child(8n+6).active {
  color: #fff;
  background: #13c2c2;
}

.ant-tag:nth-child(8n+7) {
  color: #eb2f96;
  background: #fff0f6;
}
.ant-tag:nth-child(8n+7):hover, .ant-tag:nth-child(8n+7).active {
  color: #fff;
  background: #eb2f96;
}

.ant-tag:nth-child(8n+8) {
  color: #fa8c16;
  background: #fff7e6;
}
.ant-tag:nth-child(8n+8):hover, .ant-tag:nth-child(8n+8).active {
  color: #fff;
  background: #fa8c16;
}
</style> 